<template>
  <div class="box_border c_b_item">
    <div class="item_title">
      <div class="c_b_select">
        异常统计分类
        <el-select
          v-model="day"
          placeholder="请选择"
          size="small"
          @change="select_day_week_month"
        >
          <el-option
            v-for="item in dayOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div ref="abnormal" style="width: 100%; height: 260px" />
    <div class="tl-corner"></div>
    <div class="tr-corner"></div>
    <div class="bl-corner"></div>
    <div class="br-corner"></div>
  </div>
</template>
<script>
import ajax from "@/utils/ajax";
import echarts from "echarts";

export default {
  data() {
    return {
      option_abnormaldata: [],
      day: "1",
      dayOptions: [
        {
          value: "1",
          label: "今天",
        },
        {
          value: "2",
          label: "近7天",
        },
        {
          value: "3",
          label: "近30天",
        },
      ],
      abnormaldata_day: [
        {
          name: "短路",
          value: 10,
        },
        {
          name: "过程",
          value: 52,
        },
        {
          name: "超温",
          value: 200,
        },
        {
          name: "欠压",
          value: 334,
        },
        {
          name: "漏电",
          value: 390,
        },
        {
          name: "过压",
          value: 330,
        },
        {
          name: "过流",
          value: 220,
        },
      ],
      abnormaldata_week: [
        {
          name: "短路",
          value: 410,
        },
        {
          name: "过程",
          value: 152,
        },
        {
          name: "超温",
          value: 140,
        },
        {
          name: "欠压",
          value: 134,
        },
        {
          name: "漏电",
          value: 313,
        },
        {
          name: "过压",
          value: 531,
        },
        {
          name: "过流",
          value: 420,
        },
      ],
    };
  },
  mounted() {
    // this.option_abnormaldata = this.abnormaldata_day;
    this.getDevExceptionState();
  },
  methods: {
    getDevExceptionState() {
      ajax.get({
        url:
          this.$API.getDevExceptionState +
          "?dayType=" +
          this.day,
        success: (response) => {
          let self = this;
          self.option_abnormaldata = response.data;
        this.getAbnormalChart();
        },
      });
    },
    //异常统计管理echarts图标
    getAbnormalChart() {
      const chart = this.$refs.abnormal;
      let option_xAxisdata = [];
      let option_seriesdata = [];
      for (let item of this.option_abnormaldata) {
        option_xAxisdata.push(item.name);
        option_seriesdata.push(item.value);
      }
      if (chart) {
        const myChart = echarts.init(chart);
        const option = {
          color: ["#4F7EDD", "#01D3DE"],
          grid: {
            left: "16",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
      type: "none"
    }
          },
          legend: {
            data: ["异常设备数"],
            textStyle: {
              color: "#fff",
            },
            right: "16",
            top: "5",
          },
          xAxis: {
            type: "category",
            axisTick: {
              show: true,
            },
            axisLabel: {
              color: "#fff",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(220, 220, 220, 0.2)",
              },
            },

            data: option_xAxisdata,
          },
          yAxis: {
            show: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(220, 220, 220)",
              },
            },
          },
          series: [
            {
              name: "异常设备数",
              type: "bar",
              seriesLayoutBy: "row",
              barWidth: "25",
              label: {
                show: true,
                position: "top",
              },
              data: option_seriesdata,
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    select_day_week_month: function (value) {
       this.getDevExceptionState();
    },
  },
};
</script>
<style  scoped>
* {
  box-sizing: border-box;
}
.item_title {
  height: 50px;
  padding: 15px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid rgba(72, 143, 255, 0.2784313725490196);
}
.c_b_select {
  position: relative;
  top: -6px;
}
.tl-corner {
  position: absolute;
  width: 0.1rem;
  height: 0.1rem;
  left: -0.01rem;
  top: -0.01rem;
  border-top: 0.01rem solid #fff;
  border-left: 0.01rem solid #fff;
}
.tr-corner {
  width: 0.1rem;
  height: 0.1rem;
  position: absolute;
  right: -0.01rem;
  top: -0.01rem;
  border-top: 0.01rem solid #fff;
  border-right: 0.01rem solid #fff;
}
.bl-corner {
  width: 0.1rem;
  height: 0.1rem;
  position: absolute;
  left: -0.01rem;
  bottom: -0.01rem;
  border-bottom: 0.01rem solid #fff;
  border-left: 0.01rem solid #fff;
}
.br-corner {
  width: 0.1rem;
  height: 0.1rem;
  position: absolute;
  right: -0.01rem;
  bottom: -0.01rem;
  border-bottom: 0.01rem solid #fff;
  border-right: 0.01rem solid #fff;
}
</style>